<template>
  <div class="area-page app-container">

    <div class="content-wrap">
      <div class="left-list">
        <div v-for="(item,index) in provinces" :key="index" class="province" :class="{active:activeProvinceIndex===index}" @click="changeProvince(index)">
          {{item.name}} <span style="float:right;background-color: lightcoral;color: white;cursor:pointer;" @click.stop="removeProvince(index)">删除</span>
        </div>
        <div class="province">
          <el-button type="success" @click="provinceEditor.visible=true">添加省份</el-button>
        </div>
      </div>
      <div class="right-list">
        <el-button type="success" @click="cityEditor.visible=true">添加城市</el-button>
        <el-table v-loading="loading"
                  :data="cities" stripe border
                  style="width: 100%">
          <el-table-column
            prop="name"
            label="城市名称" min-width="100">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button size="mini"
                           type="danger"
                           @click="removeCity(scope.row.id)">删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="添加省份" :visible.sync="provinceEditor.visible" >
      <province-selector v-model="provinceEditor.value"></province-selector>
      <el-button @click="addProvince">确定</el-button>
    </el-dialog>
    <el-dialog title="添加城市" :visible.sync="cityEditor.visible">
      <area-selector v-model="cityEditor.value"></area-selector>
      <el-button @click="addCity">确定</el-button>
    </el-dialog>
  </div>

</template>

<script>
import { mapGetters } from 'vuex';
import EntityAPI from '@/api/homepage/area_setting';
import ArticleEdit from './ArticleEdit';
import AreaSelector from '../components/AreaSelector';
import ProvinceSelector from '../components/ProvinceSelector';

export default {
    components: { ProvinceSelector, AreaSelector, ArticleEdit },
    data() {
        return {
            provinces: ['1', '2', '3'],
            cities: [],
            loading: 0,
            provinceEditor: {
                visible: false,
                value: ''
            },
            cityEditor: {
                visible: false,
                value: ''
            },
            activeProvinceIndex: null
        };
    },
    computed: {
        ...mapGetters([
            'dictionary'
        ]),
        activeProvince() {
            return this.provinces[this.activeProvinceIndex];
        }
    },
    created() {
        this.getPage();
    },
    methods: {
        getPage() {
            EntityAPI.getProvinces()
                .then(res => {
                    this.provinces = res.obj;
                    if (this.provinces.length > 0) {
                        this.activeProvinceIndex = 0;
                        this.getCities(this.provinces[0].areaId);
                    }
                });
        },
        getCities(provinceId) {
            EntityAPI.getCities(provinceId)
                .then(res => {
                    this.cities = res.obj;
                });
        },
        addProvince() {
            EntityAPI.addProvince(this.provinceEditor.value)
                .then(res => {
                    this.getPage();
                    this.provinceEditor.visible = false;
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        addCity() {
            EntityAPI.addCity(this.cityEditor.value)
                .then(res => {
                    this.getCities(this.activeProvince.areaId);
                    this.cityEditor.visible = false;
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        removeProvince(index) {
            EntityAPI.remove(this.provinces[index].id)
                .then(res => {
                    this.provinces = [];
                    this.getPage();
                });
        },
        removeCity(id) {
            EntityAPI.remove(id)
                .then(res => {
                    this.getCities(this.activeProvince.areaId);
                });
        },
        changeProvince(index) {
            this.activeProvinceIndex = index;
            this.getCities(this.provinces[index].areaId);
        }
    }
};
</script>

<style lang="scss">
.area-page {
  .content-wrap {
    display: flex;
    justify-content: space-between;
    .left-list {
      width:25%;
      .province {
        height:50px;
        line-height: 50px;
        background-color: #f7f7f7;
        text-align: center;
        border-bottom: 1px #aaa solid;
        &.active {
          color:white;
          background: green;
        }
      }
    }
    .right-list {
      width:70%;
    }
  }
}
</style>
